<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-bind>
<!--				<el-button-->
<!--					type="primary"-->
<!--					size="mini"-->
<!--					:disabled="selectRow.length > 0 ? false : true"-->
<!--					@click="bindTag('bind')"-->
<!--					>批量绑定标签</el-button-->
<!--				>-->
			</template>
			<!-- <template #slot-cancel-bind>
				<el-button
					type="primary"
					size="mini"
					:disabled="selectRow.length > 0 ? false : true"
					>批量解绑标签</el-button
				>
			</template> -->
			<template #slot-filter>
				<el-select
					size="mini"
					v-model="selects.label"
					placeholder="请选择标签"
					filterable
					style="margin-left: 10px"
					@change="
						val => {
							refresh({ label: val });
						}
					"
				>
					<el-option label="全部" value></el-option>
					<el-option
						:label="item"
						:value="item"
						v-for="(item, index) in options.label"
						:key="index"
					></el-option>
				</el-select>
			</template>

			<!--是否新用户-->
			<template #table-column-newPerson="{ scope }">
				<el-tag size="small" v-if="scope.row.newPerson === 1">是</el-tag>
				<el-tag size="small" v-else-if="scope.row.newPerson === 0">否</el-tag>
				<el-tag size="small" v-else>未注册</el-tag>
			</template>

			<!--添加移除标签-->
			<template #table-column-label="{ scope }">
				<template v-if="scope.row.labelList && scope.row.labelList.length > 0">
					<el-tag
							size="small"
							style="margin: 4px"
							@close="removeLabel(scope.row, index)"
							v-for="(item, index) in scope.row.labelList"
							:key="item"
					>{{ item }}</el-tag
					>
				</template>
				<span v-else>暂无标签</span>

<!--				<a class="add-label" @click="addLabel(scope.row)">添加标签</a>-->
			</template>

			<template #table-column-os="{ scope }">
				<el-tag size="small" v-if="scope.row.os === '0'">安卓</el-tag>
				<el-tag size="small" v-else-if="scope.row.os === '1'">苹果</el-tag>
				<el-tag size="small" v-else>其他</el-tag>
			</template>

			<!--是否启用-->
			<template #table-column-status="{scope}">
				<el-switch
					v-model="scope.row.statusFlag"
					@change="onSwitchChange(scope.row)"
					active-color="#13ce66"
					inactive-color="#ff4949"
				>
				</el-switch>
			</template>

			<template #slot-row-newPeople="{scope}">
<!--				<el-button-->
<!--					type="text"-->
<!--					size="small"-->
<!--					v-if="!scope.row.isNewPersonLabel"-->
<!--					@click="setNewPersonLabel(scope.row)"-->
<!--					>设置新人标签</el-button-->
<!--				>-->
<!--				<el-button-->
<!--					type="text"-->
<!--					size="small"-->
<!--					style="color: rgb(255, 73, 73)"-->
<!--					v-else-->
<!--					@click="cancelNewPersonLabel(scope.row)"-->
<!--					>取消新人标签</el-button-->
<!--				>-->
			</template>
		</cl-crud>
		<!--创建标签弹窗-->
		<label-dig ref="label" :item="item" :tagType="tagType" @refresh="tagRefresh"></label-dig>
	</div>
</template>

<script>
import platform from '@/mixin/platform';
import LabelDig from './components/label-dig';
export default {
	name: 'userInfo',
	components: {
		LabelDig
	},
	data() {
		return {
			crud: null,
			options: {
				label: []
			},
			selects: {},
			selectRow: [],
			item: null, // 当前行
			tagType: true, //true 单个添加  false 批量绑定
			batchTag: '' //批量标签
		};
	},
	created() {
		this.getLabelList();
	},
	mixins: [platform],
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.msgList.user)
				.set('dict', {
					label: {
						add: '批量绑定标签'
					}
				})
				.set('table', {
					on: {
						'selection-change': selection => {
							this.selectRow = selection;
						}
					},
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							selectable: this.selectableCheck,
							width: 60
						},
						{
							label: '用户名',
							prop: 'nickName',
							align: 'center',
							emptyText: '未注册'
						},
						{
							label: '手机号',
							prop: 'phone',
							align: 'center',
							emptyText: '未绑定'
						},
						{
							label: '设备标识',
							prop: 'cid',
							align: 'center'
						},
						{
							label: '是否新用户',
							prop: 'newPerson',
							align: 'center',
							emptyText: '未注册'
						},
						{
							label: '关联标签',
							prop: 'label',
							align: 'center'
						},
						{
							label: '平台',
							prop: 'os',
							align: 'center'
						},
						{
							label: '是否启用',
							prop: 'status',
							align: 'center'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center'
						}
					],

					op: {
						layout: ['slot-row-newPeople']
					}
				})
				.set('layout', [
					[
						'refresh-btn',
						'slot-bind',
						'slot-cancel-bind',
						'slot-filter',
						'query',
						'flex1',
						'search-key'
					],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next, render }) => {
					let { list } = await next(params);
					list.map(e => {
						e.labelList = e.label ? e.label.split(',') : [];
						e.statusFlag = e.status === 1 ? true : false;
						e.isNewPersonLabel = false;
						e.labelList.forEach(item => {
							if (item === '新人') {
								e.isNewPersonLabel = true;
							}
						});
					});

					render(list);
				})
				.done();

			app.refresh();
		},
		refresh(params) {
			this.crud.refresh(params);
		},
		selectableCheck(row) {
			if (row.userId == '0') {
				return false;
			} else {
				return true;
			}
		},
		tagRefresh(params) {
			if (this.tagType) {
				this.crud.refresh();
			} else {
				this.getBatchTag(params);
			}
		},
		// 获取标签列表
		getLabelList() {
			this.$service.msgList.user.labelList().then(res => {
				this.options.label = res;
			});
		},
		// 添加标签
		addLabel(item) {
			console.log(this.options.label);
			this.item = item;
			this.tagType = true;
			this.$refs.label.open(this.options.label, false);
		},
		// 删除标签
		removeLabel(obj, i) {
			let labelArr = obj.labelList.filter((item, index) => {
				if (index === i) {
					return false;
				}
				return true;
			});
			this.$service.msgList.user
				.update({
					id: obj.id,
					label: labelArr.join(',')
				})
				.then(() => {
					this.$message.success('删除成功');
					this.refresh();
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		onSwitchChange(item) {
			let params = {
				id: item.id
			};
			if (item.statusFlag === true) {
				params.status = 1;
			} else {
				params.status = 0;
			}
			this.$service.msgList.user
				.update(params)
				.then(() => {
					this.$message.success('更新成功');
					this.refresh();
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		setNewPersonLabel(item) {
			let params = {
				id: item.id,
				label: item.labelList.concat(['新人']).join(',')
			};

			this.$service.msgList.user
				.update(params)
				.then(() => {
					this.$message.success('更新成功');
					this.refresh();
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		cancelNewPersonLabel(item) {
			let Arr = item.labelList.filter(item => {
				if (item === '新人') {
					return false;
				} else {
					return true;
				}
			});
			let params = {
				id: item.id,
				label: Arr.join(',')
			};

			this.$service.msgList.user
				.update(params)
				.then(() => {
					this.$message.success('更新成功');
					this.refresh();
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		//批量绑定/解绑标签
		bindTag(type) {
			let uids = '';
			this.selectRow.forEach(item => {
				if (uids == '') {
					uids += item.userId;
				} else {
					uids += ',' + item.userId;
				}
			});
			this.item = uids;
			this.tagType = false;
			this.$refs.label.open(this.options.label, true);
			console.log(type);
		},
		getBatchTag(params) {
			this.$service.msgList.user
				.setLabels({
					uids: this.item,
					labels: params
				})
				.then(() => {
					this.$message.success('添加成功');
				})
				.catch(err => {
					this.$message.error(err);
				});
		}
	}
};
</script>

<style lang="stylus" scoped>
.add-label {
    color rgb(255, 73, 73)
    cursor pointer
    transition .3s
    &:hover {
        opacity .8
    }
}
</style>
